<!-- 更多停车弹出框 -->
<template>
  <div class="dy-panel" v-if="showHeadquartersMoreLayer">
    <div class="dy-panel-main">
      <div class="dy-panel-header">
        <div class="dy-panel-close" @click="closeCurrent"></div>
      </div>
      <div class="dy-panel-content">
        <div class="dy-panel-item" v-for="(item,index) in moreDataList" @click="clickMoreEvent(item)">
          <div class="t-l"></div>
          <div class="t-r"></div>
          <div class="b-l"></div>
          <div class="b-r"></div>
          <div class="dy-panel-icon" :style="{ backgroundImage: 'url(' + item.icon + ')' }"></div>
          <div class="dy-panel-text">{{item.title}}</div>
        </div>
      </div>
    </div>
  </div>
  <headquarters-fwqzssrph-layer v-if="showFwqzssrphLayer" @closeChild="closeChild"></headquarters-fwqzssrph-layer>
  <headquarters-ydzssrdb-layer v-if="showYdzssrdbLayer" @closeChild="closeChild"></headquarters-ydzssrdb-layer>
  <headquarters-ndzssrdb-layer v-if="showNdzssrdbLayer" @closeChild="closeChild"></headquarters-ndzssrdb-layer>
  <headquarters-shxsfwqph-layer v-if="showShxsfwqphLayer" @closeChild="closeChild"></headquarters-shxsfwqph-layer>
  <headquarters-zsshxsph-layer v-if="showZsshxsphLayer" @closeChild="closeChild"></headquarters-zsshxsph-layer>
  <headquarters-zsxssrdb-layer v-if="showZsxssrdbLayer" @closeChild="closeChild"></headquarters-zsxssrdb-layer>
  <headquarters-ndcklxsdb-layer v-if="showNdcklxsdbLayer" @closeChild="closeChild"></headquarters-ndcklxsdb-layer>
  <headquarters-ndzssr-layer v-if="showNdzssrLayer" @closeChild="closeChild"></headquarters-ndzssr-layer>
  <headquarters-ndzssrdb-layer2 v-if="showNdzssrdbLayer2" @closeChild="closeChild"></headquarters-ndzssrdb-layer2>
  <headquarters-zsqk-layer v-if="showZsqkLayer" @closeChild="closeChild"></headquarters-zsqk-layer>
  <HeadquartersDpjklphLayer v-if="showDpjklphLayer" @closeChild="closeChild"></HeadquartersDpjklphLayer>
  <HeadquartersZssrklbLayer v-if="showZssrklbLayer" @closeChild="closeChild"></HeadquartersZssrklbLayer>
</template>
<script setup>
  import {ref} from "vue";
  import fwqzssrph from "../../../assets/img/headquarters_more/icon1-1.png";
  import ydzssrdb from "../../../assets/img/headquarters_more/icon1-2.png";
  import ndzssrdb from "../../../assets/img/headquarters_more/icon1-3.png";
  import zsqk from "../../../assets/img/headquarters_more/icon1-4.png";
  import shxsfwqph from "../../../assets/img/headquarters_more/icon1-5.png";
  import zsshxsph from "../../../assets/img/headquarters_more/icon1-6.png";
  import zsxssrb2 from "../../../assets/img/headquarters_more/icon1-8.png";
  import ndcklxsdb from "../../../assets/img/headquarters_more/icon1-9.png";
  import ndzhsr from "../../../assets/img/headquarters_more/icon1-10.png";
import ndzssrdb2 from "../../../assets/img/headquarters_more/icon1-11.png";
import dpjklph from "../../../assets/img/headquarters_more/dpjklph.png";
import zssrklb from "../../../assets/img/headquarters_more/zssrklb.png";
import HeadquartersFwqzssrphLayer from "./headquartersFwqzssrphLayer.vue";
import HeadquartersYdzssrdbLayer from "./headquartersYdzssrdbLayer.vue";
import HeadquartersNdzssrdbLayer from "./headquartersNdzssrdbLayer.vue";
import HeadquartersShxsfwqphLayer from "./headquartersShxsfwqphLayer.vue";
import HeadquartersZsshxsphLayer from "./headquartersZsshxsphLayer.vue";
import HeadquartersZsxssrdbLayer from "./headquartersZsxssrdbLayer.vue";
import HeadquartersNdcklxsdbLayer from "./headquartersNdcklxsdbLayer.vue";
import HeadquartersNdzssrLayer from "./headquartersNdzssrLayer.vue";
import HeadquartersNdzssrdbLayer2 from "./headquartersNdzssrdbLayer2.vue";
  import HeadquartersZsqkLayer from "./headquartersZsqkLayer.vue";
  import HeadquartersZssrklbLayer from "./headquartersZssrklbLayer.vue";
  import HeadquartersDpjklphLayer from "./headquartersDpjklphLayer.vue";

  const props = defineProps({
    showHeadquartersMoreLayer: Boolean
  })
  const emit = defineEmits(['closeMoreLayers','showMoreLayers']);

  const moreDataList = ref([
    {
      title:'服务区招商收入排行',
      name:'fwqzssrph',
      icon: fwqzssrph
    },{
      title:'月度招商收入对比',
      name:'ydzssrdb',
      icon: ydzssrdb
    },
    {
      title:'年度招商收入对比',
      name:'ndzssrdb',
      icon: ndzssrdb
    },
    {
      title:'招商情况',
      name:'zsqk',
      icon: zsqk
    },
    {
      title:'商户销售服务区排行',
      name:'shxsfwqph',
      icon: shxsfwqph
    },
    {
      title:'招商商户销售排行',
      name:'zsshxsph',
      icon: zsshxsph
    },
    {
      title:'招商销售收入对比',
      name:'zsxssrdb',
      icon: zsxssrb2
    },
    {
      title:'年度车客流销售对比',
      name:'ndcklxsdb',
      icon: ndcklxsdb
    },
    {
      title:'年度招商收入',
      name:'ndzhsr',
      icon: ndzhsr
    },
    {
      title:'年度招商收入对比',
      name:'ndzssrdb2',
      icon: ndzssrdb2
    },
    {
      title:'店铺聚客率排行',
      name:'dpjklph',
      icon: dpjklph
    },
    {
      title:'招商收入客流比',
      name:'zssrklb',
      icon: zssrklb
    }
  ])

  const showFwqzssrphLayer = ref(false);//显示 服务区招商收入排行
  const showYdzssrdbLayer = ref(false);//显示 月度招商对比
  const showNdzssrdbLayer = ref(false);//显示 年度招商对比
  const showShxsfwqphLayer = ref(false);//显示 年度招商对比
  const showZsshxsphLayer = ref(false);//显示 年度招商对比
  const showZsxssrdbLayer = ref(false);//显示 年度招商对比
  const showNdcklxsdbLayer = ref(false);//显示 年度招商对比
  const showNdzssrLayer = ref(false);//显示 年度招商对比
  const showNdzssrdbLayer2 = ref(false);//显示 年度招商对比
  const showDpjklphLayer = ref(false);//显示 年度招商对比
  const showZssrklbLayer = ref(false);//显示 年度招商对比

  //招商情况
  const showZsqkLayer = ref(false);

  const closeCurrent = function (){
    emit("closeMoreLayers",'headquarters');
  }
  const showCurrent = function (){
    emit("showMoreLayers",'headquarters');
  }
  const clickMoreEvent = function (item){
    closeCurrent();
    if (item.name === 'fwqzssrph'){
      showFwqzssrphLayer.value = true;
    }
    else if (item.name === 'ydzssrdb'){
      showYdzssrdbLayer.value = true;
    }
    else if (item.name === 'ndzssrdb'){
      showNdzssrdbLayer.value = true;
    }
    else if (item.name === 'shxsfwqph'){
      showShxsfwqphLayer.value = true;
    }
    else if (item.name === 'zsshxsph'){
      showZsshxsphLayer.value = true;
    }
    else if (item.name === 'zsxssrdb'){
      showZsxssrdbLayer.value = true;
    }
    else if (item.name === 'ndcklxsdb'){
      showNdcklxsdbLayer.value = true;
    }
    else if (item.name === 'ndzhsr'){
      showNdzssrLayer.value = true;
    }
    else if (item.name === 'ndzssrdb2'){
      showNdzssrdbLayer2.value = true;
    }else if (item.name === 'zsqk'){
      showZsqkLayer.value = true;
    }
    else if (item.name === 'dpjklph'){
      showDpjklphLayer.value = true;
    }
    else if (item.name === 'zssrklb'){
      showZssrklbLayer.value = true;
    }
  }

  const closeChild = function (){
    showCurrent()
    showFwqzssrphLayer.value = false;
    showYdzssrdbLayer.value = false;
    showNdzssrdbLayer.value = false;
    showShxsfwqphLayer.value = false;
    showZsshxsphLayer.value = false;
    showZsxssrdbLayer.value = false;
    showNdcklxsdbLayer.value = false;
    showNdzssrLayer.value = false;
    showNdzssrdbLayer2.value = false;
    showZsqkLayer.value = false;
    showDpjklphLayer.value = false;
    showZssrklbLayer.value = false;
  }
</script>
<style scoped>
.dy-panel-item{
  width: 28% !important;
}
</style>
